<template>
	<view>
		<view class="footer">
			<block v-if="type == 'house'">
				<view class="block" v-for="(i,index) in houseAry" :key="index" @click="goPage(i.src)">
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="" class="img"></image>
					<view :class="['text',tabIndex == index ? 'text-act' : '']" >{{ i.title }}</view>
			</view>
			</block>
			<block v-if="type == 'accompany'">
				<view class="block" v-for="(i,index) in accompanyAry" :key="index" @click="goPage(i.src)">
					<image :src="tabIndex == index ? i.selectIcon :i.icon" mode="" class="img"></image>
					<view :class="['text',tabIndex == index ? 'text-act' : '']" >{{ i.title }}</view>
				</view>
			</block>
			<block v-else-if="type == 'cosmetology'">
				<view class="block" v-for="(i,index) in cosmetologyAry" :key="index" @click="goPage(i.src)">
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="" class="img"></image>
					<view :class="['text',tabIndex == index ? 'text-act' : '']" >{{ i.title }}</view>
				</view>
			</block>
			<block v-else-if="type == 'nursery'">
				<view class="block" v-for="(i,index) in nurseryAry" :key="index" @click="goPage(i.src)">
					<image :src="tabIndex == index ? i.activeIcon : i.icon" mode="" class="img"></image>
					<view :class="['text',tabIndex == index ? 'text-act2' : '']" >{{ i.title }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	const home = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/home.png';
	const homeActive = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/home_active.png';
	const service = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/fw.png';
	const serviceActive = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/fw_active.png';
	const message = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/message.png';
	const messageActive = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/message_active.png';
	const order = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/order.png';
	const orderActive = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/order_active.png';
	const my = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/my.png';
	const myActive = 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/tabbar/my_active.png';
	const houseAry = ref([
			{
				title: '首页',
				src: '/pages/house-tmp/index/index'
			},
			{
				title: '消息',
				src: '/pages/house-tmp/msg/msg'
			},
			{
				title: '我的',
				src: '/pages/house-tmp/my/my'
			}
	]);
	const accompanyAry = ref([
		{
			title: '首页',
			src: '/pages/accompany-tmp/index/index',
			icon: home,
			selectIcon: homeActive
		},
		{
			title: '服务',
			src: '/pages/accompany-tmp/service/service',
			icon: service,
			selectIcon: serviceActive
		},
		{
			title: '消息',
			src: '/pages/accompany-tmp/msg/msg',
			icon: message,
			selectIcon: messageActive
		},
		{
			title: '订单',
			src: '/pages/accompany-tmp/order/order',
			icon: order,
			selectIcon: orderActive
		},
		{
			title: '我的',
			src: '/pages/accompany-tmp/my/my',
			icon: my,
			selectIcon: myActive
		}
	]);
	const cosmetologyAry = ref([
		{
			title: '首页',
			src: '/pages/cosmetology-tmp/index/index'
		},
		{
			title: '预约',
			src: '/pages/cosmetology-tmp/subscribe/subscribe'
		},
		{
			title: '小舒服',
			src: '/pages/cosmetology-tmp/comfortable/comfortable'
		},
		{
			title: '小精致',
			src: '/pages/cosmetology-tmp/fine/fine'
		}
	])
	const nurseryAry = ref([
		{
			title: '申请加入',
			src: '/pages/nursery-tmp/index/index',
			icon: '/static/nursery/tabbar/index.png',
			activeIcon: '/static/nursery/tabbar/index2.png',
		},
		{
			title: '关于我们',
			src: '/pages/nursery-tmp/about/about',
			icon: '/static/nursery/tabbar/about.png',
			activeIcon: '/static/nursery/tabbar/about2.png'
		},
		{
			title: '注意事项',
			src: '/pages/nursery-tmp/attention/attention',
			icon: '/static/nursery/tabbar/attention.png',
			activeIcon: '/static/nursery/tabbar/attention2.png'
		},
		{
			title: '小草网络',
			src: '/pages/nursery-tmp/xcwl/xcwl',
			icon: '/static/nursery/tabbar/xcwl.png',
			activeIcon: '/static/nursery/tabbar/xcwl2.png'
		}
	])
	const props = defineProps({
		type: {
			type: [String,Number],
			default: ''
		},
		tabIndex:{
			type: [Number],
			default: 0
		}
	})
	const goPage = (src) => {
		uni.redirectTo({
			url:src
		})
	}
</script>

<style lang="scss" scoped>
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: mp-sizing(50);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		background-color: $uni-bg-color;
		// border-top: mp-sizing(0.5) solid black;
		.block{
			min-width: 20%;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			.img{
				width: mp-sizing(20);
				height: mp-sizing(20);
			}
			.text{
				margin-top: mp-sizing(5);
				font-size: mp-sizing(12);
			}
			.text-act{
				color: #3FA897;
			}
			.text-act2{
				color: $uni-color-primary;
			}
		}
		
	}
</style>